<template>
  <div class="Pagination">
    <el-pagination v-model:current-page="page.pageNum" v-model:page-size="page.pageSize"
      :page-sizes="[10, 20, 30, 40, 50]" :small="true" layout="total, sizes, prev, pager, next, jumper"
      :total="page.totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script setup>
const props = defineProps(["queryNum"]);
const emits = defineEmits(["getDate"]);
import { ref, onMounted, watch } from "vue";
// 分页
const page = ref({
  pageSize: 10,
  pageNum: 1,
  totalCount: 0,
});
watch(
  () => props.queryNum,
  () => {
    page.value.pageNum = 1;
    emits("getDate", page.value);
  }
);
const handleSizeChange = (val) => {
  console.log(val);
  page.value.pageSize = val;
  page.value.pageNum = 1;
  emits("getDate", page.value);
};
const handleCurrentChange = (val) => {
  console.log(val);
  page.value.pageNum = val;
  emits("getDate", page.value);
};
onMounted(() => {
  emits("getDate", page.value);
});
</script>
<style scoped lang="scss">
.Pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  padding-top: 10px;
}
</style>
